<template>
  <div style="padding: 24px;">
    <h2>个人订单信息</h2>
    <el-table :data="orderList" style="width: 100%; margin-top: 20px;">
      <el-table-column prop="info.userinfoId" label="userinfoId" width="280" />
      <el-table-column prop="food.foodName" label="食物名称" width="180" />
      <el-table-column prop="food.price" label="价格(元)" width="100" />
      <!-- 下单时间 -->
    <el-table-column prop="info.createTime" label="下单时间" width="240">
      <template #default="scope">
       {{ formatDate(scope.row.info.createTime) }}
     </template>
    </el-table-column>
<el-table-column prop="info.status" label="订单状态" width="180">
  <template #default="scope">
    <el-tag
      :type="scope.row.info.status === '已完成'
        ? 'success'
        : scope.row.info.status === '待支付'
        ? 'warning'
        : scope.row.info.status === '已取消'
        ? 'danger'
        : 'info'"
    >
      {{ scope.row.info.status }}
    </el-tag>
  </template>
  
    </el-table-column>
<el-table-column label="操作" width="200">
  <template #default="scope">
    <el-button
      v-if="scope.row.info.status === '待支付'"
      type="primary"
      size="small"
      style="margin-left: 12px;"
      @click="handlePay(scope.row)"
    >
      去支付
    </el-button>
  </template>
</el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted,reactive} from 'vue'
import{findOrderDetailsByUserId,alipay} from '@/api/food.js'
import { useUserStore } from '@/stores/userStore'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus';
// 获取用户id
const userStore = useUserStore();
const userId = userStore.currentUser.userId;
const orderList = ref([
 
]);
//封装支付信息
const payData = reactive({
  userId: null,
  TradeNo:'',
  totalAmount: 0,// 支付金额
  subject: '餐品订单', // 商品标题
  RETURN_URL:'http://localhost:8888/CommunityHealthcare/MakeAppointment', // 支付成功后跳转的地址
  // NOTIFY_URL:'http://c7d844da.natappfree.cc/api/catering/notify'// 支付成功后的回调地址(需暴露到公网让支付宝服务器访问发送回调数据) http://yeyyy.mynatapp.cc
  NOTIFY_URL:'http://yeyyy.mynatapp.cc/api/catering/notify'// 支付成功后的回调地址(需暴露到公网让支付宝服务器访问发送回调数据) http://yeyyy.mynatapp.cc
});



function handlePay(row) {
  payData.userId = userId;
  payData.totalAmount = row.food.price;
  payData.TradeNo =row.info.userinfoId;
  //创建隐藏div存放支付宝返回的form
  alipay(payData).then(res => {
    const div = document.createElement('div');
    div.innerHTML = res.data;
    document.body.appendChild(div);
    const form=div.querySelector('form');
    if (form) {
      form.submit();
    }else{
      ElMessage.error('支付宝支付失败');
    }


  });
  
}

function formatDate(dateStr) {
  if (!dateStr) return '';
  // 只保留日期和时分秒部分
  return dateStr.replace('T', ' ').substring(0, 19);
}

const selectAll = (userId) => {
  findOrderDetailsByUserId({ userId: userId }).then(res => {
    // 按下单时间倒序排序
    orderList.value = res.data.sort((a, b) => {
      return new Date(b.info.createTime) - new Date(a.info.createTime);
    });
    console.log('订单数据获取成功:', orderList.value);
  })
}


onMounted(() => {
selectAll(userId);
})
</script>